<template>
    <div class="card-detail">
        <template v-if="currentPath === '/news'">
            <div class="car-box">
                <div class="card-title">{{ card.xinwenbiaoti }}</div>
                <img :src="card.fengmiantupian" alt="">
                <div class="card-main">
                    <div class="card-text text-overflow" v-html="card.xinwenneirong"></div>
                    <div class="card-time">{{ card.faburen }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                        card.fabushijian
                        }}</div>
                </div>
                <div style="width: 90%;margin-top: 80px;">
                    <div style="color: #333; font-size: 16px; font-weight: 600;">评论列表</div>
                    <div v-for="item in commentsList"
                        style="display: flex; margin-top: 10px; border-bottom: 1px solid #f5f5f5;padding-bottom: 20px;">
                        <img style="width: 30px;height: 30px; border-radius: 100%;" src="../../public/img/1.png" alt="">
                        <div style="margin-left: 10px;">
                            <div style="color:#333;">{{ item.nickname }}</div>
                            <div style="margin-top: 10px;color:#999;">{{ item.content }}</div>
                        </div>
                    </div>
                </div>
                <el-button type="primary" size="large" @click="commentVisible = true"
                    style="margin-top: 20px;">我要评论</el-button>
                <el-dialog v-model="commentVisible" title="评论" width="500">
                    <el-input v-model="commentValue" style="width: 240px" :autosize="{ minRows: 2, maxRows: 4 }"
                        type="textarea" placeholder="请输入评论内容" />
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button @click="commentVisible = false;">取消</el-button>
                            <el-button type="primary" @click="submitComment">
                                立即提交
                            </el-button>
                        </div>
                    </template>
                </el-dialog>
            </div>
        </template>
        <template v-else-if="currentPath === '/activity'">
            <div class="car-box">
                <div class="card-title">{{ card.huodongmingcheng }}</div>
                <img :src="card.huodongtupian" alt="">
                <div class="card-main">

                    <div class="card-text text-overflow" v-html="card.fuwuneirong"></div>
                    <div class="card-time">{{ card.lianxifangshi }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        {{ card.addtime }}</div>
                </div>
            </div>
        </template>
        <template v-else-if="currentPath === '/donate'">
            <div class="car-box">
                <div class="card-title">{{ card.juanzengbiaoti }}</div>
                <img :src="card.fengmiantupian" alt="">
                <div class="card-main">

                    <div class="card-text text-overflow" v-html="card.juanzengneirong"></div>
                    <div class="card-time">{{ card.weixinyonghuming }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                        card.juanzengdidian
                        }}</div>
                </div>
            </div>
        </template>
        <template v-else-if="currentPath === '/about'">
            <div class="car-box">
                <div class="card-title">{{ card.biaoti }}</div>
                <img :src="card.fengmiantupian" alt="">
                <div class="card-main">

                    <div class="card-text text-overflow" v-html="card.neirong"></div>
                    <div class="card-time">{{ card.lianxiren
                        }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ card.lianxifangshi }}&nbsp;&nbsp;&nbsp;&nbsp;{{
                            card.youxiang
                        }}</div>
                </div>
            </div>
        </template>
        <template v-else-if="currentPath === '/links'">
            <div class="car-box">
                <div class="card-title">{{ card.lianjiemingcheng }}</div>
                <img :src="card.tupian" alt="">
                <div class="card-main">

                    <div class="card-text text-overflow" v-html="card.lianjiewangzhan"></div>
                    <div class="card-time">{{ card.addtime }}</div>
                </div>
            </div>
        </template>
        <template v-else-if="currentPath === '/story'">
            <div class="car-box">
                <div class="card-title">{{ card.biaoti }}</div>
                <img :src="card.fengmiantupian" alt="">
                <div class="card-main">

                    <div class="card-text text-overflow" v-html="card.neirong"></div>
                    <div class="card-time">{{ card.yonghuxingming }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                        card.yonghuzhanghao
                    }}</div>
                </div>
            </div>
        </template>
    </div>
</template>


<script setup>
import { ref, inject, defineProps, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'

// console.log(props.card);
const router = useRouter()
const route = useRoute()
const request = inject('request')
const list = ref(null)
const text = ref(null)
const currentPath = ref(route.query.path)
const card = ref(JSON.parse(localStorage.getItem('cardDetail')))
console.log(card);
// 新闻评论

const commentList = () => {
    request.get('/discussxuanchuanxinwen/list', {
        params: {
            page: 1,
            limit: 99,
            refid: card.value.id
        }
    }).then(res => {
        commentsList.value = res.data.list
    })
}
commentList()
const commentsList = ref(null)
const commentValue = ref(null)
const commentVisible = ref(false)
const submitComment = () => {
    request.post('/discussxuanchuanxinwen/save', {
        data: {
            content: commentValue.value,
            nickname: "用户账号2",
            refid: card.value.id,
            t: 1712804224206,
            userid: "12",
        }
    }).then(res => {
        console.log(res);
        commentVisible.value = false
        commentList()
    })
}
watch(commentVisible, (val) => {
    if (!val) {
        commentValue.value = ''
    }
})

</script>


<style scoped lang="scss">
.card-detail {
    padding: 10px;
    margin-top: 10px;

    .car-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 10px;
        padding-bottom: 40px;
    }

    img {
        width: 90%;
        height: auto
    }

    .card-title {
        font-size: 24px;
        font-weight: 700;
        color: #333;
        line-height: 80px;
    }

    .card-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 90%;

        .card-text {
            color: #666;
            font-size: 12px;
            margin-bottom: auto;
            width: 100%;
            line-height: 1.8;
            padding: 20px 0;

        }

        .card-time {
            width: 100%;
            // flex-direction: ;
            font-size: 12px;
            color: #999;
        }
    }
}
</style>
<style lang="scss">
.text-overflow.card-text {
    p {
        span {
            display: -webkit-box;
            white-space: pre-wrap;
            line-height: 1.8;
        }
    }
}
</style>